<!DOCTYPE html>
<html>
  <head>
    <title>北斗智慧校园</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<style type="text/css">
	body{
		min-width: 988px;
		overflow: hidden;
	}
	.middle{
		width: 760px;
		height: 410px;
		margin: auto;
		z-index:50;
	}
	.content{
		width:99.9%;
		height: 99.9%;
		position: absolute;
		left:0px;
		top:0px;
		z-index: 50;
		min-width: 988px;
	}
	.header{
		width:100%;
		height:60px;
		position: absolute;
		background-color: #F54339;
		top: 0px;
		left: 0px;
	}
	.zhxyLogo{
		position:absolute;
		width:423px;
		height:37px;
		top:13px;
		left:30px;
		background-image:url(img/login/logo.png);
		background-repeat:no-repeat;
	}
	.logo-content{
		width: 275px;
		height: 400px;
		float: left;
	}
	.logo2{
		width: 275px;
		height: 320px;
		float: left;
	}
	.logo3{
		width: 275px;
		height: 60px;
		float: left;
		margin-top: 19px;
	}
	.mainpage{
		float:right;
		width:400px;
		height:380px;
		margin-top: 30px;
	} 
	.loginInput{
		width:342px;
		height:50px;	
		margin-bottom:25px;
	}
	.loginInput-title{
		width:342px;
		height:50px;	
		line-height:50px;
		margin-bottom:25px;
		border-bottom:2px solid #32A5E7;
		color: #32A5E7;
		text-align: center;
		font-size: 32px;
		font-family: 微软雅黑;
	}
	.loginInput-span{
		position:absolute;
		display:inline;
		top:192px;
		left:642px;
		height:22px;
		line-height:22px;
		font-size:16px;
		color:#909090;
		margin-bottom:10px;
	}
	.loginInput input{
		width:342px;
		height:50px;
		border:1px solid #dadada;
		margin-bottom:20px;
		line-height:20px;
		font-size:16px;
	}
	.error{
		width:342px;
		height:15px;
		display:block;
		margin-bottom:15px;
		margin-left:2px;
		color:red;
	}
	.loginType{
		width:342px;
		height:20px;
		line-height:20px;
		margin-bottom:30px;
		color: #747474;
		font-family: 微软雅黑;
	}
	.loginType input{
		width:12px;
		height:12px;
		margin:8px;
	}
	.loginBtn{
		display:inline-block;
		width:342px;
		height:50px;
		line-height:50px;
		text-align:center;
		cursor:pointer;
		text-decoration:none;		
		color:#fff;
		background-color:#32A5E7;
		font-size:20px;
		font-family: 微软雅黑;
	}
	.loginBtn:hover{			
		background-color:#F54339;
	}
	.forgetPwd{
		float:right;
		height:20px;
		text-decoration:none;
		color:#00a7ea;
		cursor:pointer;
		margin-top:5px;
	}
	.forgetPwd:hover{
		color:#008ec7;
	}
	.footer{
		position:absolute;
		width:100%;
		height:45px;
		border-top:4px solid #ccc;
		line-height: 45px;
		bottom: 0px;
		left: 0px;
		color: #484848;
		text-align: center;
		font-size: 12px;
	}
	.foorter-link{
		width:1000px;
		margin:20px auto;
	}
	.foorter-link a{
		line-height:50px;
		margin:4px;
		text-decoration:none;
		color:#515151;
		cursor:pointer;
		font-size:13px;
	}
	.foorter-link span{
		line-height:50px;
		margin:4px;	
	}
	.user-role-check{
		cursor: pointer;
	}
	.back-img1{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		top:75px;
	}
	.back-img2{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		top:75px;
	}
	.back-img3{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		bottom:60px;
	}
	.back-img4{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		bottom:60px;
	}
  </style>
	<script type="text/javascript" src="public/libs/jquery/jquery-1.11.1.min.js"></script>
	
	<script type="text/javascript" src="public/libs/JSON/json2.js"></script>
	
	<script type="text/javascript" src="public/js/config.js"></script>
	
	<script type="text/javascript">
		var serverUrl = QualityCheck.GPUD.ServiceConfig;
		$(function(){
			initPage();
			window.onresize = function () {
				initPage();
			};
			document.onkeydown = function(e){ 
			    var ev = document.all ? window.event : e;
			    if(ev.keyCode==13) {
			    	$(".loginBtn").click();
			    }
			};
			$("#username").focus(function(){
				$("#username").css({ border:"1px solid rgb(50, 165, 231)"});
			});
			$("#username").blur(function(){
				$("#username").css({ border:"1px solid #dadada"});
			});
			$("#password").focus(function(){
				$("#password").css({ border:"1px solid rgb(50, 165, 231)"});
			});
			$("#password").blur(function(){
				$("#password").css({ border:"1px solid #dadada"});
			});
			$(".loginBtn").click(function(){
				var userName = $("#username").val();
				var passWord = $("#password").val();
				if(userName == "" || passWord == ""){
					$(".error").hide();
					$("#username-password-error").hide();
					if(userName == ""){
						$("#username").css({border:"1px solid red"});						
						$("#username-error").show();
					}
					if(passWord == ""){
						$("#password").css({border:"1px solid red"});
						$("#password-error").show();
					}
					return false;
				}else{
					managerLogin(userName,passWord);
				}
			});		
		});
		function managerLogin(userName,passWord){
			var obj = {
						cmd:"login",
						model:"login",
						data:{
							usercode:userName,
							password:passWord,
							usertype:3
						},
						remark:""
			};
			$.ajax({
				url: serverUrl.ServerLoginUrl, type: "get", 
				data:{param:JSON.stringify(obj)},
				success: function(data){
					if(data.result == 1 && data.data != undefined && data.data != ""){
						window.location.href = encodeURI("mindex.html?username="+data.data.userinfo.alias+"&userkey="+data.data.userinfo.userkey+"&usercode="+data.data.userinfo.usercode+"&usertype=0&headimg="+data.data.userinfo.headimg);
					}else{
						$(".error").hide();
						$("#username-password-error").show();
					}
				},error:function(){
				    	
				}	
			});
		}
		function initPage(){
			var winH = document.documentElement.clientHeight || document.body.clientHeight;
			var topM = (winH - $(".middle").height())/2;
			$(".middle").css("margin-top",topM + "px");
		}
	</script>
  </head>
  <body>
  <div class="content">
	<div class="header">
		<div class="zhxyLogo"></div>
	</div>
	<div class="back-img1">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img2">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="back-img3">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img4">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="middle">
		<div class="logo-content">
			<div class="logo2">
				<img src="img/login/logo2.png" width="100%" height="100%">
			</div>
			<div class="logo3">
				<img src="img/login/logo3.gif" width="100%" height="100%">
			</div>
		</div>
		<div class="mainpage">
			<div class="loginInput-title">登录</div>
			<div class="loginInput" id="loginInput-username">
				<input type="text" value="" id="username" name="username" placeholder="用户名"/>
			</div>
			<span class="error" style="display:none;" id="username-error">用户名不能为空</span>
			<div class="loginInput" id="loginInput-pwd">
				<input type="password" value="" id="password" name="password" placeholder="密码"/>
			</div>
			<span class="error" style="display:none;" id="password-error">密码不能为空</span>
			<span class="error" style="display:none;" id="username-password-error">用户名和密码不匹配</span>
			<div class="loginType" style="display: none;">	 
				<a href="javascript:void(0);" class="forgetPwd" target="view_window">忘记密码？</a>
			</div>
			<a class="loginBtn">登&nbsp;录</a>
		</div>
	</div>
	<div class="footer">
		<img style="vertical-align:middle;" src="img/login/logo4.png" width="53px" height="27px">&nbsp;&nbsp;Copyright © 2015 北京国斗星导航技术有限公司 All Rgiht Reserved
	</div>
  </div>
 </body>
</html>